<template>
  <div class="login">
    <div class="form-box">
      <h3>大学生健康管理系统</h3>
      <el-form ref="form" :model="user">
        <el-form-item>
          <el-input v-model="user.userName" placeholder="请输入账号" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-input v-model="user.password" placeholder="请输入密码" type="password" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <div class="form-footer">
            <el-button style="width: 48%;" type="primary" @click="login">登录</el-button>
            <el-button style="width: 48%;" type="primary" @click="showRegister">注册</el-button>
          </div>
        </el-form-item>
      </el-form>
    </div>

    <register :is-show.sync="isShow"/>
  </div>
</template>

<script>
import {login, getInfo} from "@/api/login";
import {setToken} from "@/utils/auth";
import Register from "@/views/login/register";

export default {
  components: {Register},
  data() {
    return {
      user: {
        userName: 'ymm',
        password: '123456'
      },
      isShow: false
    };
  },
  methods: {
    login() {
      login(this.user).then(res => {
        setToken(res.token)
        this.$router.push({name: 'Home'})
        getInfo().then(res => {
          this.$store.commit("user/CHANGE_USER", res)
        }).catch(err => {
        })
      }).catch(err => {
      })
    },
    showRegister() {
      this.isShow = true
    }
  },
};
</script>

<style lang="less" scoped>
.login {
  width: 100%;
  height: 100vh;
  background-image: url("../../assets/ht-6.jpg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  display: flex;
  align-items: center;

  .form-box {
    transform: translateY(-10vh); /* 向上偏移 100px */
    width: 20%;
    padding: 20px;
    margin: auto; /* 水平居中 */
    background-color: rgba(255, 255, 255, .5);

    h3 {
      margin-bottom: 20px;
      margin-top: 10px;
      display: flex; /* 使用 flex 布局 */
      justify-content: center; /* 水平居中 */
      font-size: 24px;
    }

    .form-footer {
      display: flex;
      justify-content: space-between;
    }
  }
}

</style>
